<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型</title>
  <style>

    /* css样式初始化 */
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      background: #f4f4f4;
      border: 2px #777 solid;
      width: 500px;
      height: 200px;

      /* 全写内边距padding */
      padding: 100px;

      /* 单写 */
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 10px;
      padding-left: 20px;

      /* 简写 上右下左*/
      padding: 10px 20px 10px 20px;

      /* 简写 上下 左右 */
      padding: 10px 20px;

      /* margin全写 */
      margin: 20px;

      /* margin单写 */
      margin-top: 100px;
      margin-bottom: 80px;
      



      /* 将padding和border都算入宽高中 */
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div id="box">
    <h3>box one</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloribus in soluta distinctio nemo ducimus
      quis sit rem fugit laboriosam possimus commodi, repellat atque consectetur hic eius provident, iste dignissimos!
    </p>
  </div>

  <div id="box">
    <h3>box two</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis id, numquam provident nobis eum adipisci nemo iste
      quam aliquam perspiciatis in nam? Facere atque eligendi excepturi quidem enim minima porro.</p>
  </div>

</body>

</html>